<template>
    <view class="form-wrap">
        <view v-if="header" :class="['header', {'header-border': headerBorder}]">
            <view class="title">
                {{title}}
            </view>
            <view class="toolbar">
                <slot name="toolbar"></slot>
            </view>
        </view>
        <view class="body" :style="{height: height}">
            <slot></slot>
        </view>
        <view class="footer" v-if="$slots.footer">
            <slot name="footer"></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: "FormWrap",
        props: {
            title: String,
            header: {
                type: Boolean,
                default: false
            },
            headerBorder: {
                type: Boolean,
                default: true
            },
            flex: {
                type: Number,
                default: 1
            },
            column: {
                type: Boolean,
                default: false
            },
            height: {
                type: String,
                defalut: 'auto'
            }
        }
    }
</script>

<style scoped lang="scss">
    .form-wrap {
        flex: 1;
        background: #fff;
        border-radius: 2rem;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        .header {
            flex: 0 auto;
            margin: 0 3rem;
            display: flex;
            justify-content: space-between;

            .title {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 2rem 0;
                font-weight: bold;
                height: 8rem;
            }

            .toolbar {
                display: flex;
                justify-content: center;
                align-items: center;
            }

        }

        .header-border {
            border-bottom: 1px solid #ccc;
        }

        .body {
            width: 100%;
            min-height: 78rem;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding: 3rem 3rem 0;

            /deep/ .u-form-item {
                padding: 0 0 1rem 0;
            }

            /deep/ .u-form-item__body__left__content__label {
                font-size: 2rem;
                font-weight: bold;
            }

            /deep/ .u-form-item__body__right {
                min-height: 8rem;
            }

            /deep/ .u-form-item__body__right__content__slot {
                min-height: 8rem;

                .uni-stat-box {
                    min-height: 8rem;

                    .uni-select {
                        height: 8rem;
                        padding: 0 2rem;
                        border: 1px solid #ccc;
                        border-radius: 1rem;

                        .uni-icons {
                            font-size: 3rem !important;
                        }

                        .uni-select__selector-item {
                            line-height: 6rem !important;
                            font-size: 2rem !important;
                        }

                        .uni-select__input-text {
                            font-size: 2rem;

                            &.uni-select__input-placeholder {
                                font-size: 2rem;
                                color: rgb(192, 196, 204);
                            }
                        }
                    }
                }
            }

            /deep/ .u-form-item__body__right__message {
                font-size: 2rem;
            }

            /deep/ .u-form-item__body__right__content {
                font-size: 2rem;
            }

            /deep/ .u-radio-group.u-radio-group--row {
                display: flex;
                flex-wrap: wrap;

                .u-radio {
                    width: 20%;
                    margin: 2rem;

                    .u-radio__icon-wrap {
                        height: 3rem !important;
                        width: 3rem !important;
                    }

                    .u-radio__text {
                        font-size: 2rem !important;
                    }
                }
            }

            /deep/ .u-upload__button {
                width: 16rem !important;
                height: 16rem !important;

                .u-icon__icon {
                    width: 6rem !important;
                    height: 6rem !important;
                    font-size: 6rem !important;
                }
            }

            /deep/ .u-upload__wrap__preview__image {
                width: 16rem !important;
                height: 16rem !important;
            }

            /deep/ .u-upload__deletable {
                width: 5rem !important;
                height: 5rem !important;
            }

            /deep/ .u-upload__deletable__icon {
                top: 1.5rem !important;
                right: 1rem !important;

                .u-icon__icon {
                    font-size: 2rem !important;
                }
            }

            /deep/ .u-upload__success {
                width: 5rem !important;
                height: 5rem !important;
                border-width: 3rem !important;
            }

            /deep/ .u-upload__success__icon {
                top: 1rem !important;
                right: -2rem !important;

                .u-icon__icon {
                    font-size: 2rem !important;
                }
            }
        }

        .footer {
            flex: 0 auto;
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 3rem;
            height: 12rem;
        }
    }
</style>